<template>
  <default-home-card icon="PieChartOutlined" title="捐赠方比例">
    <a-spin :spinning="spinning" tip="图表加载中....">
      <div class="echarts-box">
        <div class="gradient-main" id="gradient-main"></div>
      </div>
    </a-spin>
  </default-home-card>
</template>
<script setup>
  import DefaultHomeCard from '/@/views/system/home/components/default-home-card.vue';
  import * as echarts from 'echarts';
  import { onMounted, ref } from 'vue';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { Echarts } from '../../../../../api/echarts/echarts';
  const spinning = ref(true);
  onMounted(() => {
    init();
  });

  async function init() {
    try {
      let res = await Echarts.DonationInit();
      spinning.value = false;
      console.log(res.data, '捐赠');
      const pieData = [...res.data];
      const rich = {
        name: {
          color: '#666',
          fontSize: 14,
          padding: 7,
          fontWeight: '400',
          align: 'left',
        },
        value: {
          color: '#333',
          fontSize: 15,
          padding: 7,
          fontWeight: '500',
          align: 'left',
        },
        percent: {
          color: '#FFF',
          align: 'right',
          fontSize: 15,
          fontWeight: '500',
        },
        hr: {
          borderColor: '#ccc',
          width: '100%',
          borderWidth: 2,
          height: 0,
        },
        cir: {
          fontSize: 26,
        },
      };
      let option = {
        tooltip: {
          trigger: 'item',
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
            dataView: {
              show: true,
              lang: ['金额', '关闭', '刷新'],
              optionToContent: function (param) {
                let table = '<table border="1" style="border-collapse: collapse;">';
                table += '<tr><th>名称</th><th>金额(单位/万元)</th></tr>';
                pieData.forEach((item) => {
                  table += `<tr><td style="padding: 8px;text-align: center;">${item.name}</td><td style=" padding: 8px;text-align: center;">${item.value}</td></tr>`;
                });
                table += '</table>';
                return table;
              },
            },
          },
          itemSize: 18,
          showTitle: false,
          tooltip: {
            show: true, // 是否展示提示组件
            formatter: '{b}', // 提示框显示内容，{a} 默认英文名称, {b} 默认中文名称
            formatter: function (param) {
              switch (param.name) {
                case 'dataView':
                  return '<div>' + '数据视图' + '</div>';
                  break;
                case 'restore':
                  return '<div>' + '刷新' + '</div>';
                  break;
                case 'saveAsImage':
                  return '<div>' + '下载' + '</div>';
                  break;
                default:
                  break;
              }
            },
          },
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          bottom: 10,
        },
        series: [
          {
            type: 'pie',
            radius: ['20%', '50%'],
            center: ['50%', '50%'],
            label: {},
            data: pieData,
          },
          {
            type: 'pie',
            silent: true, // 取消高亮
            radius: ['20%', '50%'],
            center: ['50%', '50%'],
            // z: -1,
            labelLine: {
              normal: {
                length: 20,
                length2: 20,
                lineStyle: {
                  // type: 'dashed',
                  width: 2,
                },
              },
            },
            label: {
              normal: {
                alignTo: 'edge',
                edgeDistance: '15%',
                formatter: (item) => `{name|${item.name}}{value|${item.value}}\n{hr|}`,
                rich,
              },
            },
            data: pieData,
          },
          {
            type: 'pie',
            silent: true, // 取消高亮
            radius: ['10%', '57%'],
            center: ['50%', '50%'],
            z: -2,
            itemStyle: {
              normal: {
                color: '#F2F9F7',
              },
            },
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: pieData,
          },
        ],
      };
      let chartDom = document.getElementById('gradient-main');
      if (chartDom) {
        let myChart = echarts.init(chartDom);
        option && myChart.setOption(option);
      }
    } catch (error) {
      smartSentry.captureError(error);
    }
  }
</script>
<style lang="less" scoped>
  .echarts-box {
    display: flex;
    align-items: center;
    justify-content: center;
    .gradient-main {
      width: 100%;
      height: 500px;
      background: #fff;
    }
  }
</style>
